<template>
  <div class="send-pwd-dialog">
    <span class="reset-pwd-text">重置密码</span>
    <el-form ref="resetPwdForm" :model="resetPwdForm" :rules="resetPwdRules" class="reset-pwd-form" @submit.native.prevent>
      <el-form-item :error="errorMsgNum" label="钉钉工号：" prop="jobNumber" class="job-number">
        <el-input :disabled="isDisabled" v-model="resetPwdForm.jobNumber" style="width:280px !important;" class="font-14" name="jobNumber" type="text" placeholder="请输入钉钉工号" />
      </el-form-item>
      <el-form-item :error="errorMsgEmail" label="邮箱：" prop="email" class="email">
        <el-input :disabled="isDisabled" v-model="resetPwdForm.email" class="font-14" style="padding-left:2px;width:282px !important;" name="email" type="text" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item :error="errorMsgCode" label="验证码：" prop="code" class="reset-pwd-code font-14">
        <el-input
          v-model="resetPwdForm.code"
          type="text"
          name="code"
          maxlength="4"
          auto-complete="off"
          placeholder="请输入验证码"
          style="padding-left:1px;width:148px !important;"
          class="reset-code font-14"
          @keyup.enter.native="sendCode" />
        <span class="identify-code" @click="refreshCode(0)">
          <s-identify
            :identify-code="pwdIdentifyCode"
            :font-size-min="25"
            :content-width="120"
            :content-height="48"
            style="position: relative;top: 5px;" />
        </span>
      </el-form-item>
      <el-form-item class="footer">
        <el-button :loading="codeLoading" type="primary" size="small" @click="sendCode">发送验证码</el-button>
        <el-button size="small" @click="toClose">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      :visible.sync="codeDialogVisible"
      :append-to-body="true"
      width="480px"
      center
      class="code-dialog"
      @close="handleCodeClose">
      <template slot="title">
        <div class="code-title">
          <img style="width: 200px;" src="../../assets/crm_logo.png" alt="共创平台">
        </div>
      </template>
      <div class="code-content">
        <span class="reset-code-text">重置密码</span>
        <p class="text">您好，工号{{ jobNumber }}! 用于重置密码的验证码已发送至邮箱中，请登录邮箱继续找回密码流程并获取验证码！</p>
        <el-form ref="resetCodeForm" :model="resetCodeForm" :rules="resetCodeRules" auto-complete="off" class="reset-code-form">
          <el-form-item :error="errorEmailCode" label="验证码：" prop="emailCode" class="email-code">
            <el-input v-model="resetCodeForm.emailCode" auto-complete="new-password" name="emailCode" type="text" placeholder="请输入验证码"/>
          </el-form-item>
          <el-form-item label="新密码：" prop="newPwd" class="new-pwd">
            <el-input v-model="resetCodeForm.newPwd" :type="pwdType" auto-complete="new-password" name="newPwd" placeholder="请输入新密码"/>
            <div class="show-pwd" @click="showPwd">
              <svg-icon v-if="pwdType" icon-class="eye" />
              <svg-icon v-else icon-class="eye-o" />
            </div>
          </el-form-item>
          <el-form-item class="code-footer">
            <el-button :loading="subLoading" type="primary" size="small" @click="toSubmit">确定</el-button>
            <el-button size="small" @click="toClear">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import refreshCode from '@/mixins/refreshCode';
import SIdentify from '@/components/Identify';
import { sendCode, resetPwd } from '@/api/login';
export default {
  name: 'SendPwdDialog',
  components: {
    SIdentify
  },
  mixins: [refreshCode],
  props: {
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateNewPw = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能低于6位数'));
      } else {
        callback();
      }
    };
    return {
      pwdIdentifyCode: '',
      resetPwdForm: {
        jobNumber: '',
        email: '',
        code: ''
      },
      resetPwdRules: {
        jobNumber: [{ required: true, trigger: 'change', message: '请输入钉钉工号' }],
        email: [{ required: true, trigger: 'change', message: '请输入邮箱' }],
        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
      },
      errorMsgNum: '',
      errorMsgEmail: '',
      errorMsgCode: '',
      codeDialogVisible: false,
      jobNumber: '', // 获取工号用于下一个弹窗
      resetCodeForm: {
        emailCode: '',
        newPwd: ''
      },
      resetCodeRules: {
        emailCode: [{ required: true, trigger: 'change', message: '请输入验证码' }],
        newPwd: [{ required: true, trigger: 'change', validator: validateNewPw }]
      },
      pwdType: 'password',
      errorEmailCode: '',
      codeLoading: false,
      subLoading: false
    };
  },
  created() {
    this.refreshCode(0);
  },
  methods: {
    clearPwdForm() {
      this.$refs.resetPwdForm.resetFields(); // 去除表单原先的验证
      this.resetPwdForm = {
        jobNumber: '',
        email: '',
        code: ''
      };
    },
    setEmailAndJobNumber({ email, jobNumber }) {
      this.resetPwdForm.email = email;
      this.resetPwdForm.jobNumber = jobNumber;
    },
    sendCodeSub(params) {
      sendCode(params).then(res => {
        this.codeLoading = false;
        this.jobNumber = params.jobNumber;
        // this.$message.success('发送成功');
        this.clearPwdForm();
        this.$emit('closeDialog', false);
        this.codeDialogVisible = true;
      }, result => {
        this.codeLoading = false;
        if (Number(result.message) === 1) { // 判断如果错误提示是1则是判断钉钉工号，2则是判断钉钉工号和邮箱是否一致
          this.errorMsgNum = '钉钉工号不正确';
        } else {
          this.errorMsgEmail = '钉钉工号和邮箱不一致';
          this.errorMsgNum = '钉钉工号和邮箱不一致';
        }
        // this.errorMsg = result.message;
      }).catch(e => {
        this.codeLoading = false;
        console.error(e);
      });
    },
    sendCode() {
      this.codeLoading = true;
      this.errorMsgCode = ''; // 初始化，避免修改同样的值没有发生触发
      const resetPwdForm = this.resetPwdForm;
      this.$refs.resetPwdForm.validate(vaild => {
        if (vaild) {
          if (resetPwdForm.code !== this.pwdIdentifyCode) {
            this.codeLoading = false;
            this.pwdIdentifyCode = '';
            this.refreshCode(0);
            this.errorMsgCode = '验证码错误';
          } else {
            this.errorMsgCode = '';
            const params = {
              jobNumber: resetPwdForm.jobNumber,
              email: resetPwdForm.email
            };
            this.errorMsgNum = ''; // 初始化，避免修改同样的值没有发生触发
            this.errorMsgEmail = ''; // 初始化，避免修改同样的值没有发生触发
            this.sendCodeSub(params);
          }
        } else {
          this.codeLoading = false;
          return false;
        }
      });
    },
    toClose() {
      this.$emit('closeDialog', false);
      this.clearPwdForm();
    },
    showPwd() {
      this.pwdType = this.pwdType === 'password' ? '' : 'password';
    },
    clearCodeForm() { // 清除验证码表单
      this.$refs.resetCodeForm.resetFields(); // 去除表单原先的验证
      this.resetCodeForm = {
        emailCode: '',
        newPwd: ''
      };
    },
    handleCodeClose() {
      this.clearCodeForm();
    },
    toSubmit() {
      this.subLoading = true;
      this.$refs.resetCodeForm.validate(vaild => {
        if (vaild) {
          this.errorEmailCode = '';
          const params = {
            emailCode: this.resetCodeForm.emailCode,
            newPwd: this.resetCodeForm.newPwd,
            jobNumber: this.jobNumber
          };
          resetPwd(params).then(res => {
            this.subLoading = false;
            this.$message.success('密码已重置');
            this.clearCodeForm();
            this.codeDialogVisible = false;
          }, result => {
            this.subLoading = false;
            this.errorEmailCode = result.message;
          }).catch(e => {
            this.subLoading = false;
            console.error(e);
          });
        } else {
          this.subLoading = false;
          return false;
        }
      });
    },
    toClear() {
      this.codeDialogVisible = false;
      this.clearCodeForm();
    }
  }
};
</script>
<style lang="scss">
  .reset-pwd-text, .reset-code-text {
    position: relative;
    display: block;
    margin-top: 5px;
    color: #353535;
    font-size: 16px;
    &::before, &::after {
      position: absolute;
      top: 50%;
      content: "";
      display: inline-block;
      width: 64px;
      border-top: 1px solid #ddd;
    }
    &::before {
      left: 79px;
    }
    &::after {
      right: 79px;
    }
  }
  .reset-pwd-form, .reset-code-form {
    text-align: left;
    width: 390px;
    margin: 34px auto 0;
  }
  .send-pwd-dialog {
    text-align: center;

    .font-14 {
      font-size: 14px;
    }
    .reset-pwd-form {
      .el-form-item {
        margin-bottom: 22px !important;
      }
      .el-form-item__error {
        left: 99px !important;
      }
      .reset-pwd-code .el-form-item__error {
        left: 20px !important;
      }
      .job-number label, .reset-pwd-code label, .email label {
        font-size: 14px !important;
        line-height: 45px !important;
      }
      .job-number .el-input, .email .el-input {
        width: 240px;
        input {
          border-radius: 4px;
          height: 45px;
        }
      }
      .email .el-input {
        margin-left: 26px;
      }
      .reset-pwd-code {
        .el-form-item__content {
          height: 48px;
          display: flex;
          align-items: center;
        }
        .reset-code {
          width: 160px;
          margin-left: 13px;
          margin-right: 15px;
          input {
            border-radius: 4px;
            height: 45px;
          }
        }
      }
      .footer {
        margin-top: 39px;
        .el-form-item__content {
          text-align: center;
          .el-button {
            width: 184px;
            height: 38px;
          }
          .el-button--default {
            margin-left: 5px;
          }
        }
      }
    }
  }
  .code-dialog {
    .el-dialog {
      border-radius: 8px;
    }
    .code-title {
      padding-top: 38px;
    }
    .el-dialog__body {
      padding-bottom: 30px;
    }
    .code-content {
      text-align: center;
      .text {
        text-align: left;
        width: 378px;
        padding-top: 10px;
        margin: 14px auto;
        color: #999999;
        font-size: 14px;
      }
      .reset-code-form {
        .el-form-item {
          margin-bottom: 22px !important;
        }
        .el-form-item__error {
          left: 85px !important;
        }
        .email-code label, .new-pwd label {
          font-size: 14px !important;
          line-height: 40px !important;
        }
        .email-code .el-input, .new-pwd .el-input {
          width: 280px;
          margin-left: 17px;
          input {
            height: 48px;
          }
        }
        .show-pwd {
          position: absolute;
          right: 20px;
          top: 50%;
          margin-top: -9px;
          font-size: 16px;
          color: #acafb7;
          cursor: pointer;
          user-select: none;
          width: 18px;
          height: 17px;
          display: flex;
          svg {
            width: 18px;
            height: 17px;
          }
        }
        .code-footer {
          margin-top: 39px;
          .el-form-item__content {
            text-align: center;
            .el-button {
              width: 184px;
              height: 38px;
            }
            .el-button--default {
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
</style>
